<template>
	<view class="part-all">
		<view class="single" v-for="(item,index) in listData" :key="index" @click="skip_path(item.skip)">
		   <view class="single-icon"><image :src="item.icon" mode="" /></view>
		   <view class="single-name"><text>{{item.name}}</text></view>
		   <view class="single-count"><text>{{item.count}}</text></view>
		   <view class="single-rightIcon"><image :src="item.rightIcon" /></view>
	    </view>
	</view>
</template>

<script>
  export default{
	  props:{
		  listData:{
			  type:Array,
			  default:[]
		  }
	  },
	  methods:{
		  skip_path(path){
			  this.$emit('skip_next',path)
		  }
	  }
  }
</script>

<style lang="scss">
    .part-all{
		width: 100%;
		height: 100%;
		padding:20upx 30upx;
		box-sizing: border-box;
		.single{
			width: 100%;
			margin-top: 10upx;
			margin-bottom: 30upx;
			height: 80upx;
			display: flex;
			padding: 0upx 10upx;
			box-sizing: border-box;
			position: relative;
			.single-icon,
			.single-count,
			.single-rightIcon{
				width: auto;
				display: flex;
				align-items: center;
				font-size: 32upx;
				&>image{
					width: 60upx;
					height: 60upx;
				}
			}
			.single-name{
				flex: 1;
				display: flex;
				align-items: center;
				font-size: 32upx;
				padding-left: 10upx;
				box-sizing: border-box;
			}
			&::after{
				content: '';
				width: 200%;
				height: 200%;
				position: absolute;
				top: 0;
				left: 0;
				border: 1px solid #bfbfbf;
				border-radius: 4px;
				-webkit-transform: scale(0.5,0.5);
				transform: scale(0.5,0.5);
				-webkit-transform-origin: top left;
			}
		}
	}
</style>
